<script setup>

import {getCurrentInstance, onBeforeMount, reactive, ref} from "vue";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage, genFileId} from 'element-plus'
import {multipartPost, post} from "@/net";
import router from "@/router";

const { proxy } = getCurrentInstance();

const form = reactive({
    sid: 0,
    name: '',
    age: 0,
    motto: '',
    gender: '',
    info: '',
    file: null
})

onBeforeMount(() => {
    getSinger()
})

const getSinger = () => {
    post('/api/singer/sid', {
                sid: proxy.$route.query.sid
            }, (data) => {
                form.name = data.name
                form.age = data.age
                form.motto = data.motto
                form.gender = data.gender
                form.info = data.info
                form.file = data.pic
                form.sid = data.sid
                console.log(form)
            }
    )
}

const options = Array.from({ length: 100 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const rules = {
    name: [
        {required: true, message: '请输入歌手名字！', trigger: 'blur'}
    ],
    age: [
        {required: true, message: '请输入年龄！', trigger: 'blur'}
    ],
    motto: [
        {required: true, message: '请输入座右铭！', trigger: 'blur'}
    ],
    info: [
        {required: true, message: '请输入简介', trigger: 'blur'}
    ]
}

const upload = ref()
const formRef = ref()
const isEmailValid = ref(false)
const fileList = ref([])

const handleExceed = function (files) {
    upload.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    upload.value.handleStart(file)
}

const onValidate = (prop, isValid) => {
    if (prop === 'info') {
        isEmailValid.value = isValid
    }
}

const updateSinger = () => {
    formRef.value.validate((isValid) => {
        if (isValid) {
            console.log(fileList.value)
            let formData = new FormData()
            formData.append("file", fileList.value[0].raw)
            formData.append("name", form.name)
            formData.append("age", form.age)
            formData.append("gender", form.gender)
            formData.append("motto", form.motto)
            formData.append("info", form.info)
            formData.append("sid", form.sid)
            for (let pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }
            multipartPost('api/singer/update', formData, (message) => {
                ElMessage.success(message)
                router.push('/index/singer')
            }, (message) => {
                ElMessage.warning(message)
            })
        } else {
            ElMessage.warning('请填写完整歌手信息！')
        }
    })
}
</script>

<template>
    <div style="margin: 20px;">
        <el-form
                ref="formRef"
                :model="form"
                :rules="rules"
                @validate="onValidate"
                label-width="120px"
                class="demo-ruleForm"
                status-icon
        >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" style="width: 100px;"/>
            </el-form-item>
            <el-form-item prop="sid">
                <input v-model="form.sid" hidden="hidden"/>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-select-v2
                        v-model="form.age"
                        :options="options"
                />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                    <el-radio label="M">男</el-radio>
                    <el-radio label="F">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="座右铭" prop="motto">
                <el-input v-model="form.motto"
                          type="textarea"
                          style="width: 700px;"
                          maxlength="150"
                          show-word-limit/>
            </el-form-item>
            <el-form-item label="简介" prop="info">
                <el-input v-model="form.info"
                          type="textarea"
                          style="width: 700px;"
                          :autosize="{minRows:2, maxRows:6}"
                          maxlength="1000"
                          show-word-limit
                />
            </el-form-item>
            <el-form-item label="歌手照片" prop="file">
                <el-upload
                        ref="upload"
                        list-type="picture-card"
                        v-model:file-list="fileList"
                        :show-file-list="true"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :auto-upload="false"
                >
                    <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                        </div>
                    </template>
                    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updateSinger">
                    提交
                </el-button>
                <el-button type="warning" @click="router.push('/index/singer')">
                    返回
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<style scoped>
</style>